import Taro from '@tarojs/taro'
import './index.scss'
import { Image, ScrollView, Swiper, SwiperItem, Text, View } from "@tarojs/components";
import GRootPage from "../../../components/RootPage";
import GHeader from "../../../components/Header";
import classNames from 'classnames'

const MAX_HEIGHT = 800

export default class IndexDetail extends Taro.Component {
  state = {
    bannerList: [
      { src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589885786162&di=a9ceaed8a0ae7ccb5ba1d00bfaa8cca0&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F6f215bcfb0c2d8da161736673bc3e394b4047cd4.jpg' },
      { src: 'http://q1.qlogo.cn/g?b=qq&nk=704729872&s=640' },
      { src: 'https://cdnst1.rryue.cn/photos/31388a70ac834cbbb7f80147e426a4c1.jpg' },
    ],
    urls: [],
    height: 0,
    currentIndex: 0,
    isLike: 0, // 是否是喜欢，1 喜欢 | 0 不喜欢
  }

  onLike = () => {
    this.state.isLike = [1, 0][this.state.isLike]
    this.setState({})
  }

  componentWillMount () {
    const urls = this.state.bannerList.map(banner => banner.src)
    Taro.getImageInfo({
      src: urls[0],
      success: result => {
        const { height } = result
        this.state.height = (height > MAX_HEIGHT ? MAX_HEIGHT : height) + 'rpx'
        this.setState({ urls })
      }
    })
  }

  render () {
    const { bannerList, height, currentIndex, urls, isLike } = this.state
    return (
      <GRootPage scrollView={false} rootStyle={{ paddingBottom: 0 }}>
        <GHeader type='page'>
          <View className='index-detail-user flex-row'>
            <Image className='index-detail-user-avatar' src='http://q1.qlogo.cn/g?b=qq&nk=704729872&s=640' />
            <View className='index-detail-user-info'>
              <Text className='index-detail-user-name'>zeng</Text>
            </View>
          </View>
        </GHeader>
        <ScrollView scrollY className='scroll-y'>
          <View className='index-detail-swiper-box'>
            <Swiper
              current={currentIndex}
              duration={200}
              className='index-detail-swiper'
              style={{ height }}
              onAnimationFinish={e => {
                const current = e.detail.current
                current !== currentIndex && this.setState({ currentIndex: e.detail.current })
              }}
            >
              {
                bannerList.map((banner, index) => (
                  <SwiperItem key={banner.src + ''} onClick={() => {
                    Taro.previewImage({
                      current: urls[currentIndex],
                      urls,
                    })
                  }}>
                    {/* aspectFill(可以考虑第一张使用该属性) aspectFit */}
                    <Image src={banner.src} mode={index ? 'aspectFit' : 'aspectFill'} className='index-detail-swiper-img' />
                  </SwiperItem>
                ))
              }
            </Swiper>
            <View className='index-detail-swiper-footer'>
              <Text className='index-detail-swiper-footer-label'>{currentIndex + 1} / {bannerList.length}</Text>
            </View>
            {/* 指示器，暂不要 */}
            {/*<View className='index-detail-swiper-dots flex-row'>*/}
            {/*  {*/}
            {/*    new Array(bannerList.length).map((item, index) => (*/}
            {/*      <View key={index + ''}*/}
            {/*            className={'index-detail-swiper-dot ' + (index === currentIndex ? 'index-detail-swiper-dot--active' : '')} />*/}
            {/*    ))*/}
            {/*  }*/}
            {/*</View>*/}
          </View>
          <View className='index-detail-content plr-30'>
            <Text className='index-detail-content-label'>
              嗯嗯
            </Text>
          </View>
          <View className='index-detail-other-box flex-row plr-30'>
            <Text className='index-detail-time-label'>更新于 05-12</Text>
            <Text className='index-detail-read-label'>阅读 1111</Text>
          </View>
        </ScrollView>
        <View className='index-detail-footer flex-row'>
          <Text
            className={classNames('iconfont', ['icon-like-outline', 'icon-like'][isLike])}
            onClick={this.onLike}
          />
        </View>
      </GRootPage>
    )
  }
}
